<template>
	<section class="monthly">
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-button type="success" v-show="(is_records && (empty_type == '2'))" @click="handleAdd">新增</el-button>
				</el-form-item>
				 <el-form-item>
					<el-button :type="(is_disburden && (empty_type == '0')) ? 'primary' : ''" @click="disburdenHander">装货</el-button>
				</el-form-item>
				 <el-form-item>
					<el-button :type="(is_shipment && (empty_type == '1')) ? 'primary' : ''" @click="shipmentHander">卸货</el-button>
				</el-form-item>
				 <el-form-item>
					<el-button :type="(is_records && (empty_type == '2')) ? 'primary' : ''" @click="recordsHander">内部车辆信息</el-button>
				</el-form-item>
				<el-form-item v-show="my_permi.indexOf('systemConfig.shipang') > -1 || my_permi.indexOf('admin') > -1">
					<el-button type="primary" @click="shiBang" v-show="is_shibang == '0'">开始试磅</el-button>
					<el-button type="primary" @click="shiBang" v-show="is_shibang == '1'">结束试磅</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<!-- 卸货 -->
		<el-table :data="shipmentList" v-show="(is_shipment && (empty_type == '1'))" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="clientHeight2" >
			<el-table-column prop="vehicle_number" label="车牌号" width="100">
			</el-table-column>
			<el-table-column prop="tare" label="皮重" width="60">
			</el-table-column>
			<el-table-column prop="weightdata.first_readic_datetime" label="刷卡时间" width="80">
			</el-table-column>
			<el-table-column prop="weightdata.first_weight" label="地磅总重" width="60">
			</el-table-column>
			<el-table-column label="卸货重量" width="60">
				<template slot-scope="scope">
					<span>{{scope.row.discharge_weight}}</span>
					<el-button size="small" type="warning" v-show="my_permi.indexOf('InternalVehicle.updateDischargeWeight') > -1 || my_permi.indexOf('admin') > -1" @click="handleEdit(scope.$index, scope.row, 'discharge_weight')">修改</el-button>
				</template>
			</el-table-column>
			<el-table-column label="是否空车过磅" v-show="my_permi.indexOf('InternalVehicle.updateIsVoid') > -1 || my_permi.indexOf('admin') > -1" width="100">
				<template slot-scope="scope">
					<el-button v-if="scope.row.is_void == '0'" size="small" type="primary" @click="handleEdit(scope.$index, scope.row, 'is_void')">空车过磅</el-button>
					<el-button v-else size="small" type="success" @click="handleEdit(scope.$index, scope.row, 'is_void')">取消空车过磅</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="weightdata.empty_weight_time" label="空车过磅时间" width="100">
			</el-table-column>
			<el-table-column prop="weightdata.empty_weight" label="空车过磅重量" width="90">
			</el-table-column>
			<el-table-column prop="weightdata.net_weight" label="地磅净重" width="60">
			</el-table-column>
			<el-table-column prop="weightdata.weight_error" label="误差重量（地磅）" width="120">
			</el-table-column>
			<el-table-column label="异常备案" width="60">
				<template slot-scope="scope">
					<span>{{scope.row.exception}}</span>
					<el-button v-show="my_permi.indexOf('InternalVehicle.updateException') > -1 || my_permi.indexOf('admin') > -1" size="small" type="warning" @click="handleEdit(scope.$index, scope.row, 'remarks')">修改</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button v-show="my_permi.indexOf('InternalVehicle.success') > -1 || my_permi.indexOf('admin') > -1" size="small" @click="handleEdit(scope.$index, scope.row, 'success')">完成内部流程</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 装货 -->
		<el-table :data="disburdenList" v-show="(is_disburden && (empty_type == '0'))" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="clientHeight2" ::row-class-name="tableRowClassName">
			<el-table-column prop="vehicle_number" label="车牌号" width="80">
			</el-table-column>
			<el-table-column prop="tare" label="皮重" width="60">
			</el-table-column>
			<el-table-column label="是否空车过磅" v-show="my_permi.indexOf('InternalVehicle.updateIsVoid') > -1 || my_permi.indexOf('admin') > -1" width="100">
				<template slot-scope="scope">
					<el-button v-if="scope.row.is_void == '0'" size="small" type="primary" @click="handleEdit(scope.$index, scope.row, 'is_void')">空车过磅</el-button>
					<el-button v-else size="small" type="success" @click="handleEdit(scope.$index, scope.row, 'is_void')">取消空车过磅</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="empty_type_desc" label="过磅类型" width="80">
			</el-table-column>
			<el-table-column prop="weightdata.empty_weight_time" label="空车过磅时间" width="90">
			</el-table-column>
			<el-table-column prop="weightdata.empty_weight" label="空车过磅重量" width="90">
			</el-table-column>
			<el-table-column label="提货重量" width="60">
				<template slot-scope="scope">
					<span>{{scope.row.pick_weight}}</span>
					<el-button size="small" v-show="my_permi.indexOf('InternalVehicle.updatePickWeight') > -1 || my_permi.indexOf('admin') > -1" type="warning" @click="handleEdit(scope.$index, scope.row, 'pick_weight')">修改</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="weightdata.net_weight" label="地磅净重" width="60">
			</el-table-column>
			<el-table-column prop="weightdata.weight_error" label="误差重量" width="60">
			</el-table-column>
			<el-table-column prop="weightdata.weight_error_ratio" label="误差比例" width="60">
			</el-table-column>
			<el-table-column prop="weightdata.is_success_desc" label="出厂过磅是否成功" width="110">
			</el-table-column>
			<el-table-column prop="weightdata.second_time" label="出门时间" width="80">
			</el-table-column>
			<el-table-column prop="weightdata.is_finished_desc" label="是否完成" width="60">
			</el-table-column>
			<el-table-column label="是否允许出门" width="90">
				<template slot-scope="scope">
					<!-- <span v-if="scope.row.weightdata && scope.row.weightdata.is_finished == 'Y' && scope.row.is_go_desc == ''">系统允许出门</span>
					<span v-else-if="scope.row.weightdata && scope.row.weightdata.is_finished == 'N' && scope.row.is_go_desc != ''">人工允许出门</span>
					<span v-else>不允许出门</span> -->
					<span v-if="scope.row.weightdata">{{scope.row.weightdata.is_go_desc}}</span>
					<el-button size="small" v-show="my_permi.indexOf('InternalVehicle.updateIsGo') > -1 || my_permi.indexOf('admin') > -1" type="warning" @click="handleEdit(scope.$index, scope.row, 'is_go')">修改</el-button>
				</template>
			</el-table-column>
			<el-table-column label="异常备案" width="60">
				<template slot-scope="scope">
					<span>{{scope.row.exception}}</span>
					<el-button size="small" v-show="my_permi.indexOf('InternalVehicle.updateException') > -1 || my_permi.indexOf('admin') > -1" type="warning" @click="handleEdit(scope.$index, scope.row, 'remarks')">修改</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="small" v-show="my_permi.indexOf('InternalVehicle.success') > -1 || my_permi.indexOf('admin') > -1" @click="handleEdit(scope.$index, scope.row, 'success')" type="primary">完成内部流程</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 内部车辆信息表 -->
		<el-table :data="recordsList" v-show="(is_records && (empty_type == '2'))" highlight-current-row v-loading="listLoading" style="width: 100%;" :height="clientHeight" >
			<el-table-column prop="ic_id" label="IC卡号" width="100">
			</el-table-column>
			<el-table-column prop="print_code" label="印刷码" width="60">
			</el-table-column>
			<el-table-column prop="vehicle_number" label="车牌号" width="100">
			</el-table-column>
			<el-table-column prop="driver_name" label="司机姓名" width="60">
			</el-table-column>
			<el-table-column prop="driver_idcard" label="司机身份证" width="140">
			</el-table-column>
			<el-table-column prop="tare" label="车辆皮重(KG)" width="120">
			</el-table-column>
			<el-table-column prop="update_datetime" label="更新时间" width="80">
			</el-table-column>
			<el-table-column prop="operator" label="操作人员" width="100">
			</el-table-column>
			<el-table-column prop="remarks" label="备注" width="120">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button v-show="my_permi.indexOf('internalVehicle.show') > -1 || my_permi.indexOf('admin') > -1" size="small" type="primary" @click="router({path: '/logistics/vehicle/vehicles', query: {printCode: scope.row.print_code}})">详情</el-button>
					<el-button v-show="my_permi.indexOf('internalVehicle.put') > -1 || my_permi.indexOf('admin') > -1" type="warning" size="small" @click="handleEdits(scope.$index, scope.row)">编辑</el-button>
					<el-button v-show="my_permi.indexOf('internalVehicle.delete') > -1 || my_permi.indexOf('admin') > -1" type="danger" size="small" @click="del(scope.row.print_code)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" v-show="(is_records && (empty_type == '2'))" class="toolbar">
			<el-pagination
				layout="prev, pager, next"
				@current-change="handleCurrentChange"
				:total="total"
				style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog :title="title" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="120px" ref="editForm">
				<el-form-item :label="title" v-if="editType == 'purchase_weight'">
					<el-input v-model="editForm.purchase_weight" auto-complete="off"></el-input>
				</el-form-item>
				<!-- 修改卸货重量 PUT -->
				<el-form-item :label="title" v-if="editType == 'discharge_weight'">
					<el-input v-model="editForm.discharge_weight" auto-complete="off"></el-input>
				</el-form-item>
				<!-- 修改提货重量 PUT -->
				<el-form-item :label="title" v-if="editType == 'pick_weight'">
					<el-input v-model="editForm.pick_weight" auto-complete="off"></el-input>
				</el-form-item>
				<!-- 修改异常备案 -->
				<el-form-item :label="title" v-if="editType == 'remarks'">
					<el-input v-model="editForm.exception" auto-complete="off"></el-input>
				</el-form-item>
				<!-- 修改是否退货 -->
				<el-form-item :label="title" v-if="editType == 'is_return'">
					<el-select v-model="editFormSelect.is_return" placeholder="请选择" @change="changehanler($event, 'is_return')">
					    <el-option
					      v-for="item in is_return_arr"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>
				<!-- 修改是否可以出门 -->
				<el-form-item :label="title" v-if="editType == 'is_go'">
					<el-select v-model="editFormSelect.is_go" placeholder="请选择" @change="changehanler($event, 'is_go')">
					    <el-option
					      v-for="item in is_go_arr"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--编辑多个界面-->
		<el-dialog title="编辑" v-model="editsFormVisible" :close-on-click-modal="false">
			<el-form :model="editsForm" label-width="80px" ref="editsForm">
				<el-form-item label="IC卡号">
					<el-input v-model="editsForm.ic_id" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="印刷码">
					<el-input v-model="editsForm.print_code" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车牌号">
					<el-input v-model="editsForm.vehicle_number" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="司机姓名">
					<el-input v-model="editsForm.driver_name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="司机身份证">
					<el-input v-model="editsForm.driver_idcard" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车辆皮重(KG)">
					<el-input v-model="editsForm.tare" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="editsForm.remarks" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editsFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmits" :loading="editsLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" ref="addForm">
				<el-form-item label="IC卡号">
					<el-input v-model="addForm.ic_id" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="印刷码">
					<el-input v-model="addForm.print_code" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车牌号">
					<el-input v-model="addForm.vehicle_number" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="司机姓名">
					<el-input v-model="addForm.driver_name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="司机身份证">
					<el-input v-model="addForm.driver_idcard" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="车辆皮重(KG)">
					<el-input v-model="addForm.tare" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="addForm.remarks" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { systemConfig, vehicleList, vehicleLists, internalVehicleEdit, isShibang } from '@/api/api';
    import { mapState } from 'vuex'
	export default {
		data() {
			return {
				filters: {
					name: ''
				},
				cardList: [],
				total: 0,
				page: 1,
				listLoading: false,
				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				options: [],
				//新增界面数据
				addForm: {
					ic_id: '',
					print_code: '',
					vehicle_number: '',
					driver_name: '',
					driver_idcard: '',
					tare: '',
					remarks: '',
				},
				editsFormVisible: false,//编辑界面是否显示
				editsLoading: false,
				//编辑界面数据
				editsForm: {
					ic_id: '',
					print_code: '',
					vehicle_number: '',
					driver_name: '',
					driver_idcard: '',
					tare: '',
					remarks: '',
				},
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				//编辑界面数据
				editForm: {
				},
				editFormSelect: {},
				title: '',
				editText: '',
				editType: '',
                is_return_arr: [
                	{
						label: '是',
						value: '1',
					},
                	{
						label: '否',
						value: '0',
					}
                ],
                is_go_arr: [
                	{
						label: '允许出门',
						value: '1',
					},
                	{
						label: '不允许出门',
						value: '0',
					},
                ],
                is_void_arr: [
					{
						label: '是',
						value: '1',
					},
					{
						label: '否',
						value: '0',
					}
                ],
                empty_type_arr: [
					{
						label: '装货',
						value: '0',
					},
					{
						label: '卸货',
						value: '1',
					}
                ],
				is_disburden: true,
				is_shipment: false,
				is_records: false,
				is_access: false,
				empty_type: 0,
				shipmentList: [],
				disburdenList: [],
				recordsList: [],
				accessList: [],
				is_shibang: '',
				clientHeight2: document.getElementById('app').clientHeight - 200
			}
		},
        computed: {

            ...mapState(
                {
                  'my_permi': state => state.my_permi,
                  'clientHeight': state => state.clientHeight
                }
            )
        },
		methods: {
			router(path) {
				this.$router.push(path)
			},
			handleCurrentChange(val) {
				this.page = val;
				this.vehicle_list();
			},
			disburdenHander() {
				this.is_disburden = true;
				this.empty_type = '0';
				this.vehicle_list();
			},
			shipmentHander() {
				this.is_shipment = true;
				this.empty_type = '1';
				this.vehicle_list();
			},
			recordsHander() {
				this.is_records = true;
				this.empty_type = '2';
				this.vehicle_list();
			},
			//获取内部车辆信息
			vehicle_list() {
				this.listLoading = true;
				let empty_type_arr = [];
				if(this.empty_type == '0') {
					empty_type_arr = [0, 2];
				}else if(this.empty_type == '1'){
					empty_type_arr = [1, 2];
				}
				vehicleList(this.page, empty_type_arr).then((res) => {
					this.shipmentList = [];
					this.disburdenList = [];
					this.recordsList = [];
					if(res.data.status.errCode == '10002'){
						sessionStorage.removeItem('token');
						this.$message({
							message: res.data.status.message,
							type: 'warning'
				        });
				        setTimeout(() =>{
				        	this.router({path: '/login'})
				        }, 1500);
						return;
					}
					this.total = res.data.data.total
					if(this.empty_type == '0'){
						this.disburdenList = res.data.data
					}else if(this.empty_type == '1'){
						this.shipmentList = res.data.data
					}else if(this.empty_type == '2'){
						this.recordsList = res.data.data.data
					}
					this.listLoading = false
				});
			},
			del(print_code) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					vehicleLists(print_code, 'DELETE').then((res) => {
						this.listLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.vehicle_list();
					});
				}).catch(() => {

				});
			},
			changehanler(value, type) {
				if(type == 'is_void'){
					this.editForm.is_void = value
				}else if(type == 'empty_types'){
					this.editForm.empty_type = value
				}else if(type == 'is_go'){
					this.editForm.is_go = value
				}else if(type == 'is_return'){
					this.editForm.is_return = value
				}
			},
			//显示编辑界面
			handleEdit: function (index, row, type) {
				this.editText = row.print_code
				switch(type) {
					case 'purchase_weight':
						this.editType = 'purchase_weight';
						this.editForm = {
							purchase_weight: row.purchase_weight,
						};
						this.title = '修改采购重量'
						break;
					case 'discharge_weight':
						this.editType = 'discharge_weight';
						this.editForm = {
							discharge_weight: row.discharge_weight,
						};
						this.title = '修改卸货重量'
						break;
					case 'pick_weight':
						this.editType = 'pick_weight';
						this.editForm = {
							pick_weight: row.pick_weight,
						};
						this.title = '修改提货重量'
						break;
					case 'is_return':
						this.editType = 'is_return';
						this.editFormSelect = {
							is_return: row.is_return_desc,
						}
						this.editForm = {
							is_return: row.is_return,
						};
						this.title = '是否退货'
						break;
					case 'is_go':
						this.editType = 'is_go';
						this.editFormSelect = {
							is_go: row.is_go_desc,
						}
						this.editForm = {
							is_go: row.is_go,
						};
						this.title = '是否可以出门'
						break;
					case 'remarks':
						this.editType = 'remarks';
						this.editForm = {
							exception: row.exception,
						};
						this.title = '修改异常备案'
						break;
					case 'is_void':
						this.editType = 'is_void';
						this.editForm = {
							is_void: (row.is_void == '0') ? '1' : '0',
							empty_type: this.empty_type,
						};
						this.title = '过磅信息'
						break;
					case 'success':
						this.editType = 'success';
						this.editForm = {
						};
						this.title = '完成内部流程'
						break;
				}
				if(this.editType == 'is_void'){
					this.editSubmit();
					return;
				}
				this.editFormVisible = true;
			},
			//编辑
			editSubmit: function () {
				// this.$confirm('确认提交吗？', '提示', {}).then(() => {
					this.editLoading = true;
					let para = Object.assign({}, this.editForm);
					internalVehicleEdit(this.editText, this.editType, para).then((res) => {
						if(res.data.status.errCode != '0'){
							this.$message({
								message: res.data.status.message,
								type: 'error'
							});
						}else{
							this.$message({
								message: res.data.status.message,
								type: 'success'
							});
						}
						this.editLoading = false;
						if(this.editType != 'is_void'){
							this.$refs['editForm'].resetFields();
						}
						this.editFormVisible = false;
						this.vehicle_list();
					}).catch((err) => {
						console.dir(err)
					});
				// });
			},
			//显示编辑界面
			handleEdits: function (index, row) {
				this.editsFormVisible = true;
				this.print_code = row.print_code;
				this.editsForm = {
					ic_id: row.ic_id,
					print_code: row.print_code,
					vehicle_number: row.vehicle_number,
					driver_name: row.driver_name,
					driver_idcard: row.driver_idcard,
					tare: row.tare,
					remarks: row.remarks,
				};
			},
			//编辑
			editSubmits: function () {
				this.$refs.editsForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editsLoading = true;
							let para = Object.assign({}, this.editsForm);
							vehicleLists(this.print_code, 'PUT', para).then((res) => {
								if(res.data.status.errCode != '0'){
									this.$message({
										message: res.data.status.message,
										type: 'error'
									});
								}else{
									this.$message({
										message: res.data.status.message,
										type: 'success'
									});
								}
								this.editsLoading = false;
								this.$refs['editsForm'].resetFields();
								this.editsFormVisible = false;
								this.vehicle_list();
							}).catch((err) => {
								console.dir(err)
							});
						});
					}
				});
			},
			handleAdd() {
				this.addFormVisible = true;
				this.addForm = {
					ic_id: '',
					print_code: '',
					vehicle_number: '',
					driver_name: '',
					driver_idcard: '',
					tare: '',
					remarks: '',
				};
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.addForm);
							vehicleLists('', 'POST', para).then((res) => {
								if(res.data.status.errCode != '0'){
									this.$message({
										message: res.data.status.message,
										type: 'error'
									});
								}else{
									this.$message({
										message: res.data.status.message,
										type: 'success'
									});
								}
								this.addLoading = false;
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.vehicle_list();
							});
						});
					}
				});
			},
			shiBang() {
				isShibang().then((res) => {
					console.log(res)
					if(res.data.status.errCode == '0'){
						location.reload()
					}
				}).catch((err) => {
					console.dir(err)
				})
			},
			systemconfig() {
				systemConfig().then((res) => {
					for(var i in res.data.data){
						if(res.data.data[i].identity == 'trial_weight'){
							this.is_shibang = res.data.data[i].deviation
						}
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			// 已完成是背景色变色
			tableRowClassName(row) {
				if(row.is_finished == 'Y'){
					return 'is_finished_tr';
				}
			}
		},
		mounted() {
			this.vehicle_list();
			this.systemconfig();
		}
	};

</script>


<style>
.monthly .el-table th>.cell,.monthly .el-table td>.cell{
    white-space: normal !important;
    text-align: center;
}
.monthly thead th.is-leaf{
    border-right: 1px solid #dfe6ec;
    border-top: 1px solid #dfe6ec;
}
.monthly thead th{
    border-right: 1px solid #dfe6ec;
    border-top: 1px solid #dfe6ec;
}
.el-table .cell, .el-table th>div{
    padding: 0 5px;
    text-align: center;
    font-size: 12px;
}
</style>